<template>

  <pull-to-refresh @load="load">
    <div class="wap-container enWorkingCatalog" id="container">
      <section class="top red hide">
        <div class="time">
          <img src="~assets/images2/icon_shijian@2x.png">
          <span class="ml5">本步骤剩余时间</span>
          <span class="ml10">10分10秒</span>
        </div>
      </section>
      <ul >
        <li class="service-item" v-for="(item,index) in serviceList">
          <!--<div class="lit" @click="checkStandard(item)">-->
          <div class="lit">
            <span>{{index+1}}</span>
            <span class="name">{{item.serviceType}}</span>
            <span class="service-status c999" v-if="item.status === 3 || item.status === 5">已完成</span>
            <span class="service-status  red" v-if="item.status === 4">质检中</span>
          </div>

          <div class="lic" v-if="item.status === 0">
            <ul class=" pb15">
              <li v-if="item.serviceType">
                <div class="info-item c666 ">服务项目描述</div>
                <div class="info-cont">{{item.serviceType}}</div>
              </li>
              <li v-if="item.predictTime">
                <div class="info-item c666">标准工作时长</div>
                <div class="info-cont"> {{item.predictTime}}</div>
              </li>
              <li v-if="item.standard">
                <div class="info-item c666">参考工作标准</div>
                <div class="info-cont">{{item.standard}}</div>
              </li>
              <li v-if="item.standard">
                <div class="info-item c666 ">参考质量标准</div>
                <div class="info-cont">{{item.standard}}</div>
              </li>
              <li v-if="false">
                <div class="info-item c666">参考质量标准</div>
                <div class="pic-box">
                  <div  class="pics rowflex">
                    <div v-for="item in item.qualityFileStorePath" class="picItem" v-bind:style="{backgroundImage: 'url(http://'+item.path+')'}"></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="lib" v-if="item.status === 0">
            <!--<div class="pic" @click="uploadPic(item)">-->
            <div class="pic" @click="showPopup()">
              <img src="~assets/images2/icon_shangchuan@2x.png">
              拍照
              <span class="ml10" v-if="formFileStore">{{formFileStore.length}}张照片</span>
              <span class="ml10" v-else>0张照片</span>

              <!--<span v-if="item.status === 3 || item.status === 4" class="ml10">查看照片</span>-->
            </div>
            <div v-if="item.status === 0" class="down-btn" @click="finishService(item)">完成</div>
            <!--<div v-if="item.status === 4" class="hint">质检中</div>-->
          </div>
        </li>
      </ul>
      <div class="add-item blue" @click="addTollService()">
        添加收费项目
      </div>
      <section class="bottom_bar cfff" @click="commitWork()" v-if="showFinishBtn">
        处理完成
      </section>
      <div v-transfer-dom>
        <popup v-model="workPopup" height="90%" style="background-color: #fff">
          <popup-header
            left-text="取消"
            right-text="确认"
            title="设备维修图片"
            :show-bottom-border="false"
            @on-click-left="showPopup"
            @on-click-right="showPopup"></popup-header>
          <UploadImage :imgs="formFileStore"></UploadImage>
          <group :gutter="0" class="textarea">
            <x-textarea placeholder="维修描述" :show-counter="true" :max="140" v-model="formDescribe">

            </x-textarea>
          </group>
        </popup>
      </div>
    </div>
  </pull-to-refresh>
</template>

<script>
    import PullToRefresh from '../common/PullToRefresh'
    import {Popup,TransferDom,Group,XTextarea,PopupHeader} from 'vux'
    import UploadImage from './uploadImage.vue'
    export default {
      name: "enWorkingCatalog",
      components: {PullToRefresh, Popup, UploadImage,Group,XTextarea,PopupHeader},
      directives: {
        TransferDom
      },
      data() {
        return {
          workPopup: false,
          formFileStore: [],
          formFileId: "",
          formDescribe: "",
          serviceList: [],
          newServiceList: [],
          orderInfo: {},
          orderId: '',
          showFinishBtn: false
        }
      },
      mounted () {
        let id = this.$route.query.orderId
        console.log(this.$route.query.orderId)
        this.orderId = id

        let data = {workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
        this.$http.get('/work/api/serviceitem/', {params: data}).then(res => {
            for (var i = 0; i < res.data.data.length; i++) { //筛选未确认的服务项目
              if (res.data.data[i].status !== 1 && res.data.data[i].status !== 2) {
                this.serviceList.push(res.data.data[i])
                if (res.data.data[i].status === 4 || res.data.data[i].status === 0) {
                  this.showFinishBtn = false
                  return false
                }
              }
              // if (res.data.data[res.data.data.length-1].status ===)
            }
            this.showFinishBtn = true
          }
        )
        this.websocket()
      },
      methods: {
        websocket () {
          let host = ''
          if (window.location.host.indexOf('gongdan.xwseries') > -1){
            host = '119.23.224.29:9003'
          } else if (window.location.host.indexOf('test.xwseries') > -1 || window.location.host.indexOf('localhost') > -1) {
            host = '192.168.1.218:9003'
          }
          let ws = new WebSocket('ws://'+ host +'/work/webSocketCore/'+this.$store.state.user.userInfo.id)
          console.log('ws://'+ host +'/work/webSocketCore/'+this.$store.state.user.userInfo.id)
          ws.onopen = () => {
            // Web Socket 已连接上，使用 send() 方法发送数据
            console.log('连接成功')
          }
          ws.onmessage = evt => {
            console.log('数据已接收...')
            let reData = JSON.parse(evt.data)
            console.log(reData)
            if (reData.type) {
              this.updateList()
            }
          }
          ws.onclose = function () {
            // 关闭 websocket
            console.log('连接已关闭...')
          }
          // 路由跳转时结束websocket链接
          this.$router.afterEach(function () {
             ws.close()
          })
        },
        showPopup: function () {
          this.workPopup = !this.workPopup
        },
        updateList: function () {
          this.serviceList = []
          let data={workOrderId: this.orderId, noPage: true, orderNumber: 'asc'}
          this.$http.get('/work/api/serviceitem/', {params: data}).then(res=>{
              for (var i = 0; i < res.data.data.length; i++){ //筛选未确认的服务项目
                if (res.data.data[i].status !== 1 && res.data.data[i].status !== 2) {
                  this.serviceList.push(res.data.data[i])
                  if (res.data.data[i].status === 4 || res.data.data[i].status === 0){
                    this.showFinishBtn = false
                    return false
                  }
                }
              }
            this.showFinishBtn = true
            }
          )
        },
        commitWork: function () {
          this.$http.put('/work/api/workorder/finishInhand/'+this.orderId).then(res=>{
              this.$router.push({path: '/engineer/enWorkingOrder', query: {orderId: this.orderId}})
            }
          )
        },
        uploadPic: function (item) {
          this.$router.push({path: '/engineer/enWorkingService', query: {orderId: this.orderId,id: item.id, serviceItem: item}})
        },
        checkStandard: function (item){
          this.$router.push({path: '/engineer/enWorkingServiceStandard', query: {serviceInfo: item}})

        },
        finishService: function (item) {
          let formData = {}
          // if(this.$store.state.serviceItem.serviceInfo){
          //   if(this.$store.state.serviceItem.serviceInfo.serviceItemId === item.id){
          //     formData.qualityFileStore = this.$store.state.serviceItem.serviceInfo.qualityFileStore
          //     formData.endingState = this.$store.state.serviceItem.serviceInfo.endingState
          //   }
          // }
          let fileArr = []
          if (this.formFileStore.length < 1){
            this.$vux.alert.show({
              title: '提示',
              content: '请您拍照并上传该节点完成情况再点击',
            })
            return false
          }
          if (this.formFileStore) {

            for (var i = 0; i < this.formFileStore.length; i++) {

              fileArr.push(this.formFileStore[i].id)
            }
            this.formFileId = fileArr.join(';')
            console.log(this.formFileId)
            formData.qualityFileStore = this.formFileId
            formData.endingState = this.formDescribe
            console.log(formData)
          }
          this.$http.put('/work/api/serviceitem/'+item.id+'/execute?qualityFileStore='+formData.qualityFileStore+'&endingState='+formData.endingState).then(res=>{
              this.formFileStore = []
              this.formFileId = ''
              this.formDescribe = ''
              this.updateList()
            }
          )
        },
        load(resolve) {
          this.$router.go(0)
          setTimeout(() => {
            resolve();
          }, 500)
        },
        addTollService: function () {
          this.$router.push({path: '/engineer/enAddTollService/', query: {orderId: this.$route.query.orderId, showPop: true}})
        },
      },
    }
</script>

<style lang="less">
  .enWorkingCatalog {
    font-size: 0.15rem;
    box-sizing: border-box;
    padding-bottom: 1rem;

    .top {
      font-size: 0.1rem;
      margin: 0.16rem 0.1rem 0 0.1rem;
    }
    .top .time {
      height: 0.16rem;
      line-height: 0.16rem;
    }
    .time img {
      height: 0.16rem;
      width: 0.16rem;
      vertical-align: bottom;
    }

    ul li.service-item {
      box-shadow: 0 0.02rem 0.04rem 0 #ebebeb;
      background-color: #fff;
    }
    .lit {
      height: 0.43rem;
      line-height: 0.43rem;
      padding-left: 0.1rem;
      /*background: url("~assets/images2/icon_zuojian@2x.png") no-repeat right center;*/
      /*background-size: 0.06rem 0.1rem;*/
      border-bottom: solid 1px #ebebeb;
      .service-status{
        float: right;
        margin-right: 0.1rem;
        font-size: 0.13rem;
      }
    }
    .name {
      margin-left: 0.17rem;
    }
    .lic{
      border-bottom: solid 1px #ebebeb;
      ul{
        padding-left: 0.37rem;
        padding-right: 0.15rem;
        li{
          display: flex;
          margin-top: 0.1rem;
          .info-cont {
            width: 2.2rem;
          }
          .pic-box{
            width: 70%;
          }
          .pics{
            overflow-x: auto;
          }
          .picItem{
            width: 1.3rem;
            height: 0.85rem;
            margin-right: 0.05rem;
            margin-top: 0.04rem;
            -webkit-border-radius: 0.025rem;
            -moz-border-radius: 0.025rem;
            border-radius: 0.025rem;
            -webkit-background-size: cover;
            background-size: cover;
          }
        }
      }
      .info-item{
        width: 1rem;
      }
    }
    .lib {
      font-size: 0.12rem;
      height: 0.48rem;
      line-height: 0.48rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /*border-top: solid 1px #ebebeb;*/
      padding-left: 0.37rem;
      padding-right: 0.1rem;
    }
    .lib img {
      width: 0.19rem;
      height: 0.17rem;
      vertical-align: sub;
    }
    .pic {

    }
    .down-btn {
      width: 0.55rem;
      height: 0.25rem;
      line-height: 0.25rem;
      text-align: center;
      color: #fff;
      background-color: #42a3fd;
      -webkit-border-radius: 0.02rem;
      -moz-border-radius: 0.02rem;
      border-radius: 0.02rem;
    }
    .hint{
      width: 0.55rem;
      height: 0.25rem;
      line-height: 0.25rem;
      text-align: center;
      color: #ed3f14;
    }
    .add-item {
      float: right;
      font-size: 0.12rem;
      height: 0.24rem;
      line-height: 0.24rem;
      margin-top: 0.15rem;
      padding-left: 0.29rem;
      padding-right: 0.1rem;
      background: url('~assets/images2/icon_tianjiafeiyong@2x.png') no-repeat;
      background-size: auto 100%;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
